<template>
    <!-- 修改止盈止损 -->
    <el-dialog :visible="showPalist"
      width="1000px"
      top="25vh"
      @close="dialogClose"
      custom-class="full-stop"
      class="setlist">
      <div
        slot="title"
        class="dialog-title">{{$t('trade.settingPLlist')}}</div>
      <Table :border= false :columns="columnsData" :data="fullstoplist2"></Table>
      <div class="footerFlex">
        <div class="addBtn">
          <button @click="addSetlist"><span>+</span> 新增</button>
        </div>
        <Page :total="total" size="small" :page-size="limit"
            :current.sync="currentPage"
            @on-change="handlePage"
            @on-page-size-change="handlePageSize"/>
      </div>
    </el-dialog>
</template>

<script>
import { Table, Page } from "iview"
import { mapGetters } from "vuex";
import * as trade from "../../../request/trade";
export default {
	components: {
		Table,
		Page
	},
	computed: {
		...mapGetters([
			"fullstoplist2",
			'total'
		]),
	},
  props: {
    showPalist: Boolean,
    limit: Number,
    currentPage1: {
      type: Number
    }
    // total: Number,
    // listData: Array
  },
  data () {
      return {
          currentPage: this.currentPage1,
          // total: 0,
          // showPaList: false,
          columnsData: [
            {
                title: '合约',
                key: 'Name'
            },
            {
                title: '均价',
                key: 'AveragePrice'
            },
            {
                title: '方向',
                key: 'Business'
            },
            {
                title: '数量',
                key: 'Quantity'
            },
            {
                title: '止盈价',
                key: 'ProfitPoint'
            },
            {
                title: '止盈金额',
                key: 'ProfitAmount'
            },
            {
                title: '止损价',
                key: 'LossPoint'
            },
            {
                title: '止损金额',
                key: 'LossAmount'
            },
            {
                title: '编辑',
                key: 'action',
                width: 70,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('div', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginBottom: '1px',
                                color: '#2391EE',
                                cursor: 'pointer'
                            },
                            on: {
                                click: () => {
                                    this.show(params.index)
                                }
                            }
                        }, '修改'),
                        h('div', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            style: {
                                color: '#DD3A3B',
                                cursor: 'pointer'
                            },
                            on: {
                                click: () => {
                                    this.remove(params.index)
                                }
                            }
                        }, '删除')
                    ]);
                }
            }
          ]
      }
  },

  methods: {
    dialogClose () {
      this.$emit('dialogClose')
      // this.showPaList = false
    },
    show (index) {
        this.$emit('modifyTheStopLoss', index)
    },
    remove (index) {
        // this.data6.splice(index, 1);
      this.$emit('removeStopLoss', index)
    },
    addSetlist () {
      this.$emit('handleAddSetlist')
    },
    handlePage (val) {
      this.$emit('handlePage', val)
    },
    handlePageSize (val) {
      this.$emit('handlePageSize', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.setlist {
  .footerFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
  }
  .ivu-page{
    text-align: right;
  }
  .addBtn{
    button{
      color: #2391EE;
      border: 1px solid #2391ee;
      padding: 3px 26px;
      background: #ffffff;
      border-radius: 8px;
      font-size: 12px;
      cursor: pointer;
      span {
        font-size: 17px;
        line-height: normal;
        position: relative;
        top: 2px;
      }
    }
  }
}
</style>